<template>
  <div class="contents-container">
    <div class="search-area">
      <span class="lable-span"><i class="el-icon-search" /> 文章</span>
      <el-select v-model="editId" size="mini" style="width:380px;" placeholder="请选择文章" @change="selectChange">
        <el-option label="请选择文章标题" value="" />
        <el-option v-for="item in articleList" :key="item.articleId" :label="item.title" :value="item.articleId" />
      </el-select>
      <el-button size="mini" class="ml-15" type="success" @click="addHandle">新增文章</el-button>
      <el-button v-if="modeValue=='edit'" size="mini" class="ml-15" type="primary" @click="updateHandle">修改文章</el-button>
      <el-button v-if="editId" size="mini" class="ml-15" type="danger" @click="deletcArticle">删除文章</el-button>
      <el-button v-if="modeValue" size="mini" class="ml-15" @click="cancleEdit">取消操作</el-button>
    </div>
    <div class="editContent">
      <div v-if="saveShow" class="editTitle">
        <span class="lable-span"><span style="color:red;">*</span>文章标题</span>
        <el-input v-model="title" class="my-input" size="mini" style="width:380px;margin-left:10px;" />
      </div>
      <div class="tinymce-content">
        <div class="editBox">
          <tinymce id="tin1" ref="tin1" v-model="articleDesc" :height="600" style="width:391px;" />
          <div class="contentSave">
            <el-button v-if="saveShow" type="primary" @click="handleSubmit">
              保存
            </el-button>
          </div>
        </div>
        <div class="phoneBox">
          <div class="previewBox">
            <div class="editor-content" v-html="articleDesc" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  addArticle,
  editArticle,
  deleteArticle,
  getArticleList,
  getArticleDetail
} from '@/api/article'
import Tinymce from '@/components/Tinymce'
export default {
  name: 'CaseEdit',
  components: {
    Tinymce
  },
  data() {
    return {
      articleDesc: '',
      title: '',
      articleList: [],
      editId: '', // 编辑中的文章id
      modeValue: '',
      listQuery: {
        page: 1, // 当前页码
        limit: 999 // 每页数量
      },
      saveShow: false
    }
  },
  mounted() {
    this.getListData()
  },
  methods: {
    getListData() {
      this.$loadings().close()
      getArticleList(this.listQuery).then((res) => {
        this.$loadings().close()
        this.articleList = res.data
      }).catch(() => {
        this.$loadings().close()
      })
    },
    addHandle() {
      this.modeValue = 'add'
      this.saveShow = true
      this.editId = ''
      this.articleDesc = ''
      this.title = ''
      this.$refs.tin1.setContent('')
    },
    updateHandle() {
      this.modeValue = 'edit'
      this.saveShow = true
    },
    handleSubmit() {
      const that = this
      if (!that.title) {
        that.$message({
          type: 'danger',
          message: '请输入文章标题!'
        })
        return false
      }
      if (!that.articleDesc) {
        that.$message({
          type: 'danger',
          message: '请输入文章内容!'
        })
        return false
      }
      that.$loadings()
      if (!that.editId) {
        addArticle({
          articleDesc: that.articleDesc,
          title: that.title
        }).then(data => {
          that.$loadings().close()
          that.$message({
            type: 'success',
            message: '操作成功!'
          })
          that.getListData()
          that.cancleEdit()
        }).catch(() => {
          that.$loadings().close()
        })
      } else {
        editArticle({
          articleDesc: that.articleDesc,
          title: that.title,
          articleId: that.editId
        }).then(data => {
          that.$loadings().close()
          that.$message({
            type: 'success',
            message: '操作成功!'
          })
          that.getListData()
          that.cancleEdit()
        }).catch(() => {
          that.$loadings().close()
        })
      }
    },
    cancleEdit() {
      this.modeValue = ''
      this.articleDesc = ''
      this.title = ''
      this.editId = ''
      this.saveShow = false
      this.$refs.tin1.setContent('')
    },
    selectChange(value) {
      const that = this
      that.modeValue = 'edit'
      that.loading = true
      that.editId = value
      that.$loadings()
      getArticleDetail(value).then((res) => {
        that.$loadings().close()
        that.loading = false
        that.articleDesc = res.data.articleDesc
        that.title = res.data.title
        this.$refs.tin1.setContent(that.articleDesc)
      }).catch((err) => {
        that.$loadings().close()
        that.loading = false
        console.log(err)
      })
    },

    deletcArticle() {
      const that = this
      that.$confirm('是否删除该条数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.$loadings()
        deleteArticle({
          articleId: that.editId
        }).then((res) => {
          that.$loadings().close()
          that.$message({
            type: 'success',
            message: '操作成功!'
          })
          that.getListData()
          that.cancleEdit()
        }).catch(() => {
          that.$loadings().close()
        })
      })
    }
  }
}
</script>

<style scoped>
	.editContent {
		margin-top: 20px;
	}

	.tinymce-content {
		margin: 10px 0px;
		display: flex;
		justify-content: space-around;
	}

	.editTitle {
		padding-left: 20px;
		font-size: 14px;
	}

	.editBox {
		width: 375px;
	}

	.phoneBox {
		background: url('../../assets/img/phonebg.png') center center no-repeat;
		position: relative;
		width: 426px;
		height: 888px;
	}

	.previewBox {
		width: 375px;
		position: absolute;
		top: 108px;
		left: 26px;
		height: 670px;
		overflow-y: auto;
	}

	.editor-content {
		width: 375px;
		font-size: 14px;
	}

	.contentSave {
		display: flex;
		justify-content: flex-end;
		margin-top: 30px;
	}
</style>
